﻿<!DOCTYPE html>

<html lang="ko">
    <head>
        <title>Hinoky.com :::: Html Template</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        
        <!-- (s) favicon (s) -->
        <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
        <link rel="icon" href="/favicon.ico" type="image/x-icon">
        

        <link href="./Content/bootstrap.css" rel="stylesheet" />

        <link href="./Content/main.css" type="text/css" rel="stylesheet" />
        <style type="text/css">
            
        </style>
        <!--[if lt IE 9]>
            <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
        <script src="./Scripts/jquery-2.1.0.js" type="text/javascript"> </script>
        <script src="./Scripts/jquery-ui-1.10.4.js" type="text/j avascript"> </script>
        <script src="./Scripts/jquery.validate.js" type="text/javascript"> </script>
        <script src="./Scripts/customJS/common.js" type="text/javascript"> </script>
        <script type="text/javascript">
            $(document).ready(function () {
                /* affix the navbar after scroll below header */
                $('#nav').affix({
                    offset: {
                        top: $('header').height() - $('#nav').height()
                    }
                });

                /* highlight the top nav as scrolling occurs */
                $('body').scrollspy({ target: '#nav' });

                /* smooth scrolling for scroll to top */
                $('.scroll-top').click(function () {
                    $('body,html').animate({ scrollTop: 0 }, 500);
                });

                /* smooth scrolling for nav sections */
                $('#nav .navbar-nav li>a').click(function () {
                    var link = $(this).attr('href');
                    var posi = $(link).offset().top;
                    $('body,html').animate({ scrollTop: posi }, 700);
                });
            });
        </script>
    </head>
    <!-- HTML code from Bootply.com editor -->
    
    <body>
        <!-- (s) 페이스북 공통 영역 (s) -->
        <div id="fb-root"></div>
        <script type="text/javascript" >
            window.fbAsyncInit = function () {
                FB.init({
                    appId: '625973994105500',
                    status: true,
                    xfbml: true
                });
            };

            (function (d, s, id) {
                var js, fjs = d.getElementsByTagName(s)[0];
                if (d.getElementById(id)) return;
                js = d.createElement(s); js.id = id;
                js.src = "//connect.facebook.net/ko_KR/all.js";
                fjs.parentNode.insertBefore(js, fjs);
            }(document, 'script', 'facebook-jssdk'));
        </script>
        <!-- (s) 페이스북 공통 영역 (s) -->


        <div id="wrap">
            <!-- (s) 헤더 영역 (s) -->
            <header class="masthead">
                <div id="myCarousel" class="carousel slide">
                    <div class="carousel-inner">
                        <div class="item active">
                            <div class="container">
                                <div class="carousel-caption" >
                                    <h2>Personal IT Site. Made By Korean.</h2>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="logo">HinoKY</div> 
                </div>
            </header>
            <!-- (e) 헤더 영역 (e) -->  

            <!-- (s) 네비게이션 영역 (s) -->
            <div class="navbar navbar-custom navbar-inverse navbar-static-top" id="nav">
                <div class="container">
                    <div class="navbar-header">
                        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                            <span class="icon-bar"></span>
                        </button>
                    </div>
                    <div class="collapse navbar-collapse">
                        <ul class="nav navbar-nav nav-justified">
                            <li id="active"><a href="#" onclick="return false;" class="current">Articles</a></li>
                            <li><a href="#" onclick="return false;">BackLog</a></li>
                            <li class="dropdown">
                                <a href="#section3" class="dropdown-toggle" data-toggle="dropdown">Laboratory <b class="caret"></b></a>
                                <ul class="dropdown-menu">
                                    <li><a href="#" onclick="return false;">국내 구인현황 트래킹</a></li>
                                    <li><a href="#" onclick="return false;">웹게임 2048</a></li>
                                </ul>
                            </li>
                            <li><a href="#" onclick="return false;" >Guest Book</a></li>
                            <li><a href="#" onclick="return false;" >Contract Us</a></li>
                        </ul>
                    </div><!--/.nav-collapse -->
                </div><!--/.container -->
            </div><!--/.navbar -->
            <!-- (e) 네비게이션 영역 (e) -->
            
            <!-- (s) Body 영역 (s) -->
            <div class="container" style="width:100%">
                <div class="col-sm-2 left-area">
                    <div class="row text-center" >
                        <div class="col-md-12 after-signin">
                            <div class="col-md-12">Welcome</div>
                            <img id="imgProfileUploadArea" class="img-thumbnail col-sm-10 col-sm-offset-1" src="./images/drop-your-drawers-here.jpg" alt="" />
                            <p />
                            <div class="col-md-12" style="margin-top:10px;" >
                                <span id="spnNickName">이름영역</span>
                                <span id="spnUserId" >(Id 영역)</span>
                            </div>
                            <div class="col-md-12" style="margin-top:10px;">
                                <a href="#" id="btnLogout" onclick="return false;" rel="nofollow" class="label label-info" title="Login">Logout</a>
                                <a href="#" id="btnProfileEdit" onclick="return false;" rel="nofollow" class="label label-success" title="Request Join">Edit</a>
                                <a href="#" id="btnProfileSave" onclick="return false;" rel="nofollow" class="label label-success" title="Request Join" style="display:none" >Save</a>
                            </div>
                        </div>
                    </div>
                    <Br />
                    <div class="row" style="padding-left:15px; padding-right:15px">
                        <img class="img-thumbnail" src="http://thecutestblogontheblock.com/wp-content/uploads/2011/11/midnight-masquerade-banner-free-vintage-mask-blog-banner-copy-275x100.png" style="width:100%" /><br /><br />
                        <img class="img-thumbnail" src="http://fc00.deviantart.net/fs6/i/2005/117/e/7/n00bies_Revenge_Banner_by_digitalistic.gif" style="width:100%" />
                    </div>
                    <Br />
                    <div id="divMainKeyword" class="row main-keyword" ></div>
                </div>
                
                <!-- (s) 본문 영역 (s) -->
                <div class="col-sm-8" >
                    
                </div>
                <!-- (e) 본문 영역 (e) -->
                
                <!-- (s) 오른쪽 영역 (s) 
                    ===============================================================================
                    페이지별 특성화된 기능이 들어갈 자리 & 서버비용 충당을 고려한 베너 영역 -_-;;
                -->
                <div class="col-sm-2 right-area" style="padding:0">
                    <div class="row" style="padding-left:15px; padding-right:15px">
                        <img class="img-thumbnail" src="http://thecutestblogontheblock.com/wp-content/uploads/2011/11/midnight-masquerade-banner-free-vintage-mask-blog-banner-copy-275x100.png" style="width:100%" /><br />
                    </div>
                    <link href="./Content/eventCalendar.css" rel="stylesheet" />
                    <link href="./Content/eventCalendar_theme.css" rel="stylesheet" />
                    <script src="./Scripts/jquery.eventCalendar.min.js"></script>

                    <script type="text/javascript">
                        $(document).ready(function () {
                            
                        });
                    </script>
                    <style type="text/css">
                        .rcate {
                            border: solid 2px #bbbbbb;
                            padding: 5px;
                            margin:0;
                        }
                    </style>

                    <div class="rcate">
                        <div class="col-sm-12 alert alert-info h4" >
                            Categories
                        </div>
                        <ul id="ulArticleCategory" class="nav nav-pills nav-stacked">
                            <li class="active"><a href="#"><span class="badge pull-right">52</span>Home</a></li>
                            <li><a href="#">Profile</a></li>
                            <li><a href="#"><span class="badge pull-right">52</span>Home</a></li>
                        </ul>
                        <hr />
                        <div class="row" style="margin-top:20px" >
                            <div class="col-sm-offset-1 col-sm-10 alert alert-success h5" style="margin-bottom:10px" >
                                날짜별 게시글
                            </div>    
                            <div id="eventCalendar" class="col-sm-offset-1 col-sm-10"   style="padding:0px"></div>
                            <script type="text/ecmascript">
                                var eventsInline = [];

                                $("#eventCalendar").eventCalendar({
                                    eventsLimit: 2,
                                    monthNames: ["January", "February", "March", "April", "May", "June",
                                        "July", "August", "September", "October", "November", "December"],
                                    dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
                                    dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
                                    txt_noEvents: "게시된 글이 존재하지 않습니다.",
                                    txt_SpecificEvents_prev: "",
                                    txt_SpecificEvents_after: "Articles :",
                                    txt_next: "next",
                                    txt_prev: "prev",
                                    txt_NextEvents: "Articles :",
                                    txt_GoToEventUrl: "See the article",
                                    showDayAsWeeks: true,
                                    startWeekOnMonday: false,
                                    showDayNameInCalendar: true,
                                    showDescription: true,
                                    onlyOneDescription: true,
                                    openEventInNewWindow: false,
                                    eventsScrollable: false,
                                    jsonDateFormat: 'human', // you can use also "human" 'YYYY-MM-DD HH:MM:SS'
                                    moveSpeed: 500,	// speed of month move when you clic on a new date
                                    moveOpacity: 0.15, // month and events fadeOut to this opacity
                                    jsonData: eventsInline, 	// to load and inline json (not ajax calls)
                                    cacheJson: true
                                });
                            </script>
                        </div>
                    </div>                    
                    <p />
                    <div class="row" style="padding-left:15px; padding-right:15px">
                        <img class="img-thumbnail" src="http://thecutestblogontheblock.com/wp-content/uploads/2011/11/midnight-masquerade-banner-free-vintage-mask-blog-banner-copy-275x100.png" style="width:100%" /><br /><br />
                        <img class="img-thumbnail" src="http://fc00.deviantart.net/fs6/i/2005/117/e/7/n00bies_Revenge_Banner_by_digitalistic.gif" style="width:100%" />
                    </div>
                </div>
            </div>
            <!-- (e) Body 영역 (e) -->

        </div><!--/wrap-->

        <div id="footer">
            <div class="container">
                <p class="text-muted">Copyright ©2014 ACME, Inc.</p>
            </div>
        </div>

        <ul class="nav pull-right scroll-top">
            <li><a href="#" title="Scroll to top" onclick="return false;" ><i class="glyphicon glyphicon-chevron-up"></i></a></li>
        </ul>

        <!-- Bootstrap core JavaScript
            ================================================== -->
        <!-- Placed at the end of the document so the pages load faster -->
        <script src="./Scripts/bootstrap.js"></script>
        <script src="./Scripts/bootbox.min.js"></script>
    </body>
</html>
